<template>
  <div class="PersonnerAllocation">
    <!-- 曲线图按钮 开始 -->
    <div
      class="curveIcon"
      @click="showLineChart()"
      v-show="this.$store.state.ZhtsModule.district.id !== '100000' && this.$store.state.ZhtsModule.district.id !== '000000' "
    ></div>
    <!-- 曲线图按钮 结束 -->
    <!-- 迁入 迁出 查询日期 开始 -->
    <div class="buttonBox">
      <div class="bottonBox_leftBottonBox">
        <div
          :class="[
            clickTab == 1
              ? 'bottonBox_leftBottonBox_pie_ture'
              : 'bottonBox_leftBottonBox_pie_flase'
          ]"
          @click="FnClickTab(1)"
        >
          <span>迁入</span>
        </div>
        <div
          :class="[
            clickTab == 2
              ? 'bottonBox_leftBottonBox_pie_ture'
              : 'bottonBox_leftBottonBox_pie_flase'
          ]"
          @click="FnClickTab(2)"
        >
          <span>迁出</span>
        </div>
      <!--  <div style="width:236px;" v-show="this.$store.state.ZhtsModule.district.id == '000000' || this.$store.state.ZhtsModule.district.id == '100000'"></div>-->
      </div>
      <div class="bottonBox_rightBottonBox">
        <!-- <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in selectOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
        <el-date-picker
          v-model="value"
          type="date"
          :placeholder="value"
          value-format="yyyy-MM-dd"
          @change="selectTime"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- 迁入 迁出 查询日期 结束 -->
    <personner-allocation-component
      :timeData="value"
      :migrateType="migrateType"
    ></personner-allocation-component>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import PersonnerAllocationComponent from "@/components/feature/ZhtsModule/PersonnerAllocationComponent.vue";
import { messsageBus } from "@/util/message";

@Component({
  name: "PersonnerAllocation",
  components: {
    PersonnerAllocationComponent
  }
})
export default class PersonnerAllocation extends Vue {
  private isShow = false;
  private migrateType: any = "";
  private value: any = "";
  private clickTab: any = 1;

  //   点击切换 迁入和迁出
  private FnClickTab(val: any): void {
    this.clickTab = val;
    switch (val) {
      case 1:
        this.migrateType = "move_in";
        this.$store.dispatch("ZhtsModule/moveUpdate", "1");
        console.log(
          "迁入迁出的状态：",
          this.$store.state.ZhtsModule.moveInState
        );
        break;
      case 2:
        this.migrateType = "move_out";
        this.$store.dispatch("ZhtsModule/moveUpdate", "2");
        console.log(
          "迁入迁出的状态：",
          this.$store.state.ZhtsModule.moveInState
        );
        break;
      default:
        break;
    }
  }

  private showLineChart() {
    this.isShow = !this.isShow;
    console.log('当前关闭状态：' , this.isShow);
    this.$store.dispatch("ZhtsModule/moveUpdate", "1");
    (messsageBus as any).$emit("moveInState", this.isShow);
    this.isShow = !this.isShow;
  }

  //   获取当前时间
  private FnNowTime(): any {
    const date: any = new Date();
    const seperator1: any = "-";
    const year: any = date.getFullYear();
    let month: any = date.getMonth() + 1;
    let strDate: any = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    const currentdate: any = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
  }

  private created() {
    this.value = this.FnNowTime();

    // 初始化全局迁徙时间与迁徙状态
    this.FnClickTab(this.clickTab);
    this.$store.dispatch("ZhtsModule/setDate", this.value); // fix bug 543
    this.$store.dispatch("ZhtsModule/setSelectDate", this.value);
    console.log("当前时间：", this.value);
    console.log("初始时行政区划的状态：" , this.$store.state.ZhtsModule.district.id);
  }

  private selectTime(value: any) {
    this.$store.dispatch("ZhtsModule/setSelectDate", value);
  }
}
</script>
<style lang="less" scoped>
.PersonnerAllocation {
  // width: 100%;
  // // height: 341px;
  // height: 100%;
  // overflow: hidden;
}
.buttonBox {
  display: flex;
  justify-content: center;
}
.bottonBox_leftBottonBox {
  display: flex;
  justify-content: center;
}
.bottonBox_leftBottonBox_pie_ture {
  width: 108px;
  height: 50px;
  background: url("../../../assets/img/zhts/iconMaterial.png") no-repeat;
  background-position: -26px -74px;
  text-align: center;
  line-height: 57px;
  color: #fffaa8;
  margin: 0 5px;
  cursor: pointer;
  font-size: 18px;
}
.bottonBox_leftBottonBox_pie_flase {
  width: 108px;
  height: 50px;
  background: url("../../../assets/img/zhts/iconMaterial.png") no-repeat;
  background-position: -143px -74px;
  text-align: center;
  line-height: 57px;
  color: #8cfffe;
  margin: 0 5px;
  cursor: pointer;
  font-size: 18px;
}
.bottonBox_rightBottonBox {
  margin-left: 40px;
  width: 170px;
  height: 50px;
  background: url("../../../assets/img/zhts/iconMaterial.png") no-repeat;
  background-position: -284px -74px;
  padding-top: 5px;
  /deep/.el-date-editor.el-input, /deep/.el-date-editor.el-input__inner{
      width: auto;
  }
}
/deep/.el-input__inner {
  -webkit-appearance: none;
  background-color: #96707000;
  background-image: none;
  border-radius: 4px;
  border: 0px solid #dcdfe600;
  box-sizing: border-box;
  color: #8cfffe;
  display: inline-block;
  font-size: 17px;
  height: 50px;
  line-height: 50px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  text-align: center;
}
.curveIcon {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 527px;
  right: 20px;
  background: url("../../../assets/img/zhts/iconMaterial.png") no-repeat;
  background-position: -405px -24px;
  z-index: 999;
  cursor: pointer;
}
</style>
